<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Anime4K</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body onload="onLoad();">
    <div>
        <span>Image/Video :</span>
        <input type="text" id="txtSrc" value="input.png" placeholder="URI">
        <button onclick="onSourceChanged();">Load from URI</button>
        <span>or from</span>
        <input type="file" id="fileImg" accept="image/*,video/*" onchange="onSelectFile(this);">
    </div>
    <div>
        <span>Scale :</span>
        <input type="number" id="txtScale" value="1.25" min="1.0" max="4.0" step="0.1" onchange="onScaleChanged();">
        <span>Bold :</span>
        <input type="range" id="sliderBold" value="6" min="0.0001" max="8" step="0.001">
        <span>Blur :</span>
        <input type="range" id="sliderBlur" value="2" min="0.0001" max="8" step="0.001">
    </div>
    <br>
    <div>
        <canvas id="board" width="1280" height="720">Oops!</canvas>
    </div>
    <video id="movOrig" autoplay loop preload="auto" crossorigin="anonymous">
        Oops!
    </video>
</body>
</html>